<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <link rel="stylesheet" th:href="@{/style.css}">
</head>
<body>
<!--引用头文件~{}表示引用 ::前表示文件，后表示名称-->
<div th:replace="~{head :: h}"></div>

<div class="user-list-container">
    <h1>用户列表</h1>
    <table class="user-list">
        <thead>
        <tr class="user-item">
            <th>用户名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>性别</th>
            <th>状态信息</th>
        </tr>
        </thead>
        <tbody>
<!--        遍历获取元素
            state表示状态信息 两名字可以任取
            下标，总计等信息 注意不要在注释里面写会保存
            th:object表示将user对象设置为上下文对象，${user.age} 可简写为 *{age}-->
        <tr class="user-item" th:object="${user}" th:each="user, state: ${users}">
<!--            设置了上下文对象，${user.age} 可简写为 *{age}-->
            <td class="user-name" th:text="*{name}"></td>
<!--            thymeleaf的内联表达式也可以使用()-->
            <td class="user-email">[(${user.age})]</td>

<!--            if条件判断-->
            <td class="user-name" th:if="${user.gender} == 1" th:text="'男'"></td>
            <td class="user-name" th:if="${user.gender} == 0" th:text="'女'"></td>

<!--            switch条件判断
                th:case="*"表示其他任意条件-->
            <td class="user-email" th:switch="${user.gender}">
                <span th:case="1" th:text="'男'"/>
                <span th:case="*" th:text="'女'"/>
            </td>

<!--             thymeleaf的内联表达式：-->
            <td>
                下标：[[${state.index}]]<br>
                序号：[[${state.count}]]<br>
                当前对象：[[${state.current}]]<br>
                元素总数：[[${state.size}]]<br>
                是否为偶数行：[[${state.even}]]<br>
                是否为奇数行：[[${state.odd}]]<br>
                是否第一个元素：[[${state.first}]]<br>
                是否最后一个元素：[[${state.last}]]<br>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div th:replace="~{foot :: f}"></div>
</body>
</html>
